<template>
    <div>
        <el-card shadow="never" class="box-card">
            <div class="exam-status subject">
                <span style="margin-left: 30px;font-size: 13px; font-family:'宋体'; font-weight: bold;">试卷信息：</span>
                <!-- <el-select v-model="queryForm.subjectId" style="width: 20%;" filterable remote reserve-keyword clearable placeholder="请选择学科">
                    <el-option style="text-align: center; " v-for="item in subjects" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>   -->
                <el-input v-model="queryForm.examName" style="width: 20%;" placeholder="请输入试卷名" clearable></el-input>
                <el-button type="primary"  class="el-btn" icon="el-icon-search" @click="search"></el-button>
            </div>
        </el-card>
        <el-card shadow="never" style="margin-top:-15px;min-height: 300px;"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
            <el-card shadow="none" v-for="item in records" :key="item.id" style="margin-top:-15px;border:none">
                <el-descriptions title="考试信息" >
                    <el-descriptions-item label="试卷名">{{item.examName}}</el-descriptions-item>
                    <el-descriptions-item label="学科">{{item.subjectName}}</el-descriptions-item>
                    <el-descriptions-item label="提交时间">{{item.createTime}}</el-descriptions-item>
                    <el-descriptions-item label="用时">{{formatTimes(item.doTime)}}</el-descriptions-item>
                    <el-descriptions-item label="得分">{{ item.totalScore}}</el-descriptions-item>
                    <el-descriptions-item label="状态">
                    <el-tag size="small" v-if="item.iscorrected" type="success">已完成</el-tag>
                    <el-tag size="small" v-else type="warning">待批改</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
                <p style="text-align: right;">
                    <el-button type="primary" style="margin-right: 70px;" @click="$router.push(`/exam/examView?id=${item.id}`)">查看试卷</el-button>
                </p>
                <el-divider></el-divider>
            </el-card>
            <el-card v-if="records.length <= 0" class="no-record" shadow="never"> 
                {{message}}
            </el-card>
            <el-card shadow="none" style="margin-top:-5px;border: none;">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="queryForm.pageIndex"
                        layout="prev, pager, next"
                        :total="total">
                    </el-pagination>
            </el-card>
        </el-card>
    </div>
</template>

<script>
import {getSubjects} from '@/api/subject/subject'
import {pageList} from '@/api/records/records'
export default {
    name:'Records',
    data(){
        return{
            subjects:[],
            queryForm:{
                examName:null,
                pageIndex:1,
                pageSize:12
            },
            records:[],
            total:0,
            message:'',
            loading:false
        }
    },
    methods:{
        changeStatus(){
            this.search();
        },
        async search(){
            this.loading = true;
            let res = await pageList(this.queryForm);
            this.records = res.data.records;
            if(this.records.length <= 0){
                this.message ='暂无考试记录';
            }
            this.loading = false;
        },
        handleCurrentChange(val){
            this.queryForm.pageIndex = val;
            this.search();
        },
        async getSubjects(){
            let res = await getSubjects();
            this.subjects = res.data;
        },
        //格式化时间
        formatTimes(val){
            let hours = Math.floor(val / 60 / 60);
            let mins = Math.floor((val - (hours * 3600) )/ 60);
            let seconds = val % 60;
            return this.format(hours)+'时'+this.format(mins)+'分'+this.format(seconds)+'秒'
        },
        format(val){
            if(val < 10){
                return '0'+val;
            }
            return val;
        },

    },
    mounted(){
        // 初始化查询的条件
        this.getSubjects();
        // 初始化考试记录
        this.search();
    }
}
</script>

<style scoped>
    .exam-status{
        /* margin-top: -15px; */
        margin: 0px auto -15px;
        padding-top: 5px;
        padding-bottom: 15px;
    }

    span{
        margin-left: 30px;
        font-size: 13px; 
        font-weight: bold;
    }
    .subject{
        padding-top: 5px;
        padding-bottom: 15px;
    }
    .box-card{
        margin-top: 5px;
        margin-bottom: 15px;
    }
    .no-record{
        margin-top:-15px;
        border:none;
        line-height: 300px;
    }
    .el-btn{
        width: 80px;
        height: 38px;
        border: none;
        margin-left: 15px;
    }
</style>